<template>
  <el-container class="setting-center_mall-info-setting_bunk-info">
    <el-main>
      <el-card shadow="never" class="bunk-info-info-container">
        <div class="bunk-info-container">
          <div class="right-container">
            <el-card shadow="never" class="selectCard searchColumn">
              <el-form label-position="right" label-width="6rem">
                <el-row :gutter="40">
                  <el-col :span="8">
                    <el-form-item label="员工名称：">
                      <el-input v-model="searchParams.nameCn" placeholder="请输入" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="员工状态：">
                      <el-select v-model="searchParams.status">
                        <el-option label="全部" value="" />
                        <el-option label="已激活" value="1" />
                        <el-option label="已禁用" value="2" />
                        <el-option label="未激活" value="4" />
                        <el-option label="退出企业" value="5" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" style="float: right;">
                    <search-button :default-params="searchParams" @refreshParams="refreshParams" @getList="getEmployeeList1" />
                  </el-col>
                </el-row>

              </el-form>
            </el-card>
            <el-card shadow="never" class="commercia-tenant-list-title tableCard">
              <vxe-toolbar :refresh="{query: getEmployeeList}">
                <template v-slot:buttons>
                  <vxe-button type="warning" size="small" icon="el-icon-plus" @click="syncEmployeeListFromWx()">同步员工</vxe-button>
                </template>
              </vxe-toolbar>
              <vxe-table
                ref="xTree"
                border
                stripe
                resizable
                highlight-hover-row
                :loading="loading"
                :auto-resize="true"
                :data="employeeList"
                height="420"
                :print-config="{}"
                header-align="center"
              >
                <vxe-table-column type="seq" width="50" align="center" title=" " />
                <vxe-table-column field="employeeId" min-width="120" title="员工号" />
                <vxe-table-column field="employeeNameCnEn" title="员工名称" min-width="120" />
                <vxe-table-column field="mainDepartmentNameCn" title="所属部门" min-width="160" />
                <vxe-table-column field="statusDesc" title="员工状态" min-width="120" />
                <vxe-table-column title="操作" fixed="right" width="100" lign="center" slots="default">
                  <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="openModal(scope.row.id)">查看</el-button>
                  </template>
                </vxe-table-column>
              </vxe-table>
              <vxe-pager
                :current-page.sync="searchParams.pageNum"
                :page-size.sync="searchParams.pageSize"
                :total="total"
                :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
                @page-change="getEmployeeList"
              />
            </el-card>
          </div>
        </div>
      </el-card>
    </el-main>
    <el-dialog title="员工信息" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <el-form ref="employeeForm" :model="params" label-width="7rem">
        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="所属部门：" prop="storeNo">
              <el-input v-model="params.storeNo" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="员工编码：" prop="code">
              <el-input v-model="params.code" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="名称：">
              <el-input v-model="params.code" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import { syncEmployeeListFromWx, getEmployeePageList, viewEmployee } from '@/api/cop/contact'
import SearchButton from '@/components/SearchButton'
export default {
  components: {
    SearchButton
  },
  data() {
    return {
      currentNodekey: '0',
      searchParams: {
        mainDepartmentId: '2',
        nameCn: '',
        status: '',
        pageNum: 1,
        pageSize: 20
      },
      loading: false,
      employeeList: [],
      departmentTreeList: [],
      total: 0,
      props: {
        children: 'children',
        value: 'id',
        label: 'nameCn',
        emitPath: false
      },
      params: {},
      dialogVisible: false,
      defaultProps: {
        children: 'children',
        label: 'nameCn',
        value: 'id'
      }
    }
  },
  created() {
    this.getEmployeeList()
  },
  methods: {
    syncEmployeeListFromWx() {
      syncEmployeeListFromWx({ departmentId: this.searchParams.mainDepartmentId }).then(res => {
        if (res) {
          this.getEmployeeList()
        }
      })
    },
    refreshParams(params) {
      this.searchParams = params
      this.getEmployeeList()
    },
    getEmployeeList1() {
      this.searchParams.pageNum = 1
      this.getEmployeeList()
    },
    close() {
      this.dialogVisible = false
    },
    refresh() {
      this.dialogVisible = false
      this.getEmployeeList()
    },
    openModal(id) {
      if (id) {
        viewEmployee(id).then(response => {
          this.params = response
          this.dialogVisible = true
        })
      }
    },
    handleNodeClick(data) {
      if (!data.children) {
        this.searchParams.parentId = data.id
      }
      this.searchParams.pageNum = 1
      this.getEmployeeList()
    },
    getEmployeeList() {
      getEmployeePageList({
        ...this.searchParams
      }).then(response => {
        alert(JSON.stringify(response.records))
        this.employeeList = JSON.parse(JSON.stringify(response.records))
        this.total = response.total
      })
    }
  }
}
</script>

<style lang="scss">
.setting-center_mall-info-setting_bunk-info {
  .bunk-info-info-container {
    width: 100%;
  }
  .bunk-info-container {
    display: flex;
    .left-container {
      margin-right: 20px;
      .bunk-info-list-card {
        height: 100%;
        // margin-top: 20px;
        width: 300px;
      }
    }
    .right-container {
      width: 100%;
      .commercia-tenant-list-title {
        margin-bottom: 20px;
        .el-card__body {
          padding:  0;
        }
      }
    }
    .logoImg {
      width: 50px;
      height: 50px;
    }
  }
}
</style>
